<template>
  <div>
    <t-sticky>
      <t-navbar
        title="榜单"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <!-- <div class="header">
      <div class="tab-box">
        <div
          class="tab"
          v-for="(item, index) in tabList"
          :key="index"
          @click="handleTabClick(item, index)"
          :class="{ 'tab-active': tabIndex === index }"
        >
          <p>{{ item.name }}</p>
        </div>
      </div>

      <div class="search-box">
        <img class="search-img" src="@/assets/index/search.png" />
      </div>
    </div> -->
    <div class="side-bar-wrapper">
      <t-side-bar
        :value="sideBarIndex"
        @change="onSideBarChange"
        @click="onSideBarClick"
      >
        <t-side-bar-item
          v-for="(item, index) in listData"
          :key="index"
          :value="index"
          :label="item.chart.name"
        />
      </t-side-bar>
      <div ref="wrapper" class="content" @scroll="onScroll">
        <!-- <div class="tit-box">
          <div class="txt">基于实时热度排行</div>
          <div class="btn">
            <div
              :class="`btn-item ${hotType == 1 ? 'active' : ''}`"
              @click="onClickType(1)"
            >
              周榜
            </div>
            <div
              :class="`btn-item ${hotType == 2 ? 'active' : ''}`"
              @click="onClickType(2)"
            >
              月榜
            </div>
          </div>
        </div> -->
        <div
          v-for="(second, secondindex) in secondListData"
          :key="secondindex"
          class="section"
        >
          <RankList
            :item="second"
            :index="secondindex"
            @click="onDetail(second)"
          ></RankList>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, toRefs, onActivated, nextTick } from "vue";
import { useRouter } from "vue-router";
import rankApi from "@/api/rankApi";
import RankList from "./components/rankList.vue";
const router = useRouter();
const wrapper = ref(null);
const state = reactive({
  tabList: [
    { name: "女生" },
    { name: "男生" },
    { name: "女生" },
    { name: "男生" },
    { name: "女生" },
    { name: "男生" },
  ],
  tabIndex: 0,
  sideBarIndex: 0,
  listData: [],
  secondListData: [],
  hotType: 1,
  scrollTop: 0,
});
const { sideBarIndex, listData, secondListData, tabList, tabIndex, hotType } =
  toRefs(state);
// 返回上一页
const handleBack = () => {
  router.back();
};
// 移动榜单
const moveToActiveSideBar = (index) => {
  if (wrapper.value) {
    wrapper.value.scrollTop = 0;
  }
};
// 选择榜单大类
function onSideBarChange(value) {
  state.sideBarIndex = value;
  moveToActiveSideBar(Number(value));
  state.secondListData = state.listData[value].chartItems;
  state.scrollTop = 0;
}
// 榜单大类点击事件
function onSideBarClick() {
  console.log("e");
}
// 切换榜单周期
function onClickType(num) {
  state.hotType = num;
}
// 跳转漫画详情
function onDetail(data) {
  console.log("data", data, data.courseId);
  router.push({
    name: "home",
    query: {
      courseId: data.courseId,
    },
  });
}
// 获取榜单分类
async function getList() {
  const result = await rankApi.list();
  console.log("result", result);
  state.listData = result.data;
  state.secondListData = state.listData && state.listData[0].chartItems;
}
// 记录滚动位置
function onScroll(event) {
  console.log("e");
  if (event.target) {
    state.scrollTop = event.target.scrollTop;
  }
}
onActivated(() => {
  nextTick(() => {
    if (wrapper.value) {
      wrapper.value.scrollTop = state.scrollTop;
    }
  });
});
onMounted(() => {
  console.log("onMounted");
  getList();
});
</script>
<style lang="scss" scoped>
.side-bar-wrapper {
  display: flex;
  height: 100vh;
  background-color: var(--bg-color-demo, $b-color);
  --td-side-bar-active-color: $parm-c-color;
  --td-side-bar-width: 76px;
  :deep(.t-badge__content-text) {
    color: #000;
  }
  :deep(.t-side-bar-item) {
    padding: 0;
    padding-left: 15px;
    min-height: 50px;
  }
  ::v-deep .t-side-bar-item--active {
    color: #101010;
    font-weight: 500;
  }
  .content {
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
    &::-webkit-scrollbar {
      display: none; /* 直接隐藏滚动条 */
    }
  }

  .section {
    padding: 0;
  }

  .title {
    padding-left: 20px;
    margin-bottom: 4px;
    line-height: 26px;
  }

  .image {
    width: 48px;
    height: 48px;
  }
}
.tit-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  padding-top: 10px;
  .btn {
    display: flex;
    align-items: center;
    width: 80px;
    overflow: hidden;
    border-radius: 50px;

    .btn-item {
      flex: 1;
      font-size: 12px;
      line-height: 22px;
      height: 22px;
      background-color: #e6e6e6;
      color: #6c6c6c;
      &.active {
        background-color: $parm-c-color;
        color: #000;
      }
    }
  }
}
.header {
  width: 100%;
  background-image: url("@/assets/rank/bg-1.png");
  background-position: top center;
  background-size: 100%;
  padding-top: var(--status-bar-height);
  padding-right: 32px;
  box-sizing: border-box;
  .tab-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    overflow-x: scroll;
    padding: 10px 0;
    &::-webkit-scrollbar {
      display: none; /* 直接隐藏滚动条 */
    }
  }
  .tab {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    font-size: 20px;
    line-height: 1;
    padding: 0 13px;
    flex-shrink: 0;
  }
  .tab-active {
    background-image: url("@/assets/index/tabs-bg.png");
    background-position: 12px 12px;
    background-repeat: no-repeat;
    background-size: 24px 9px;
    p {
      font-size: 22px !important;
      color: rgb(48, 49, 51) !important;
      font-weight: 1000;
    }
  }
  .search-box {
    position: absolute;
    top: 10px;
    right: 10px;
    .search-img {
      width: 20px;
      height: 20px;
      display: block;
    }
  }
}
</style>
